<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>🌤️ 城市区域天气查询</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            padding: 20px;
        }
        .container {
            max-width: 600px;
            margin: 50px auto;
            background: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        h2 {
            text-align: center;
            color: #333;
        }
        form {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        input[type="text"] {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 15px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
        }
        button:hover {
            background-color: #0056b3;
        }
        .weather {
            margin-top: 20px;
        }
        .error {
            color: red;
            font-weight: bold;
        }
        .city-list {
            margin-top: 20px;
        }
        .city-item {
            padding: 10px;
            margin: 5px 0;
            background: #f0f8ff;
            border: 1px solid #bee5eb;
            border-radius: 5px;
            cursor: pointer;
            text-align: left;
        }
        .city-item:hover {
            background: #e0f2fe;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            margin: 10px 0;
            padding: 8px;
            background: #f0f8ff;
            border-left: 4px solid #007BFF;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>🌤️ 城市区域天气查询</h2>
        <form method="POST">
            <label for="search">请输入城市名称或关键字（如：西安、北京、上海）：</label><br>
            <input type="text" id="search" name="search" placeholder="例如：西安、北京" value="{{ search_keyword }}" required>
            <button type="submit">🔍 搜索城市</button>
        </form>

        {% if error %}
            <p class="error">{{ error }}</p>
        {% endif %}

        {% if matched_cities and not weather %}
            <div class="city-list">
                <h4>🔍 搜索结果（请选择一个城市）：</h4>
                {% for city in matched_cities %}
                    <div class="city-item" onclick="selectCity('{{ city }}')">
                        {{ city }}
                    </div>
                {% endfor %}
                <!-- 隐藏字段，用于提交用户选择的城市 -->
                <form method="POST" style="display: inline;">
                    <input type="hidden" id="selected_city_input" name="selected_city" value="">
                    <button type="submit" id="confirm_button" style="display: none;">确认查询</button>
                </form>
            </div>
        {% endif %}

        {% if weather %}
        <div class="weather">
            <h3>📍 {{ weather.city }}（{{ weather.province }}）</h3>
            <ul>
                <li><strong>🌤️ 天气：</strong>{{ weather.weather }}</li>
                <li><strong>🌡️ 温度：</strong>{{ weather.temperature }}°C</li>
                <li><strong>💨 风向：</strong>{{ weather.winddirection }}</li>
                <li><strong>🌀 风力：</strong>{{ weather.windpower }}</li>
                <li><strong>💧 湿度：</strong>{{ weather.humidity }}%</li>
                <li><strong>🕒 数据时间：</strong>{{ weather.reporttime }}</li>
                <li><strong>🏙️ 区域码：</strong>{{ weather.adcode }}</li>
            </ul>
        </div>
        <hr>
        <hr>
        <div style="text-align: center; margin-top: 30px;">
            <a href="{{ url_for('query_records') }}"
               style="display: inline-block; margin-top: 20px; padding: 10px 20px; background-color: #28a745; color: white; text-decoration: none; border-radius: 5px; font-size: 16px; text-align: center;">
                📋 查看今日查询记录
            </a>
        </div>

        {% endif %}

        <script>
            function selectCity(city) {
                document.getElementById('selected_city_input').value = city;
                document.getElementById('confirm_button').click();
            }
        </script>
    </div>
</body>
</html>